<!-- personal_info.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-semibold mb-4">个人信息</h2>
    <form id="personalForm" method="post">
        <div class="mb-4">
            <label for="username" class="block text-gray-700 text-sm font-bold mb-2">用户名:</label>
            <input type="text" id="username" name="username"
                   class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
        </div>
        <div class="mb-4">
            <label for="password" class="block text-gray-700 text-sm font-bold mb-2">密码:</label>
            <input type="password" id="password" name="password"
                   class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
        </div>
        <div class="mb-4">
            <label for="role" class="block text-gray-700 text-sm font-bold mb-2">角色:</label>
            <input type="text" id="role" name="role"
                   class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
        </div>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">保存更改
        </button>
    </form>
</div>

<script>
    // 使用jQuery监听表单提交事件
    $(document).ready(function () {
        $('#personalForm').on('submit', function (event) {
            // 阻止默认的表单提交行为
            event.preventDefault();

            // 获取表单数据
            const formData = $(this).serialize();

            // 发送AJAX请求到服务器
            $.ajax({
                type: 'POST',
                url: "/updatePersonalInfo",
                data: formData,
                success: function (response) {
                    // 如果更新成功，可以在这里处理响应，比如弹出成功提示
                    alert(response);
                    // 重置表单（可选）
                    // $('#personalForm')[0].reset();
                },
                error: function (xhr, status, error) {
                    // 处理错误情况
                    alert('更新个人信息时发生错误: ' + error);
                }
            });
        });
    });
</script>